<template>
  <div class="container">
    <div class="statisticsTitleSty">项目总数</div>
    <div class="statisticsConSty">
      <div class="statisticsNumBox">
        <ul class="statisticsNum">
          <li
            v-for="(item, i) in totalLists"
            :key="i"
            style="cursor: pointer"
            :class="[isHeight ? 'liSty' : 'heightSty']"
            @click="goProjectList('', '')"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
        <ul :class="[isHeight ? '' : 'boxSty', 'list']">
          <li>
            <div :class="[isHeight ? 'name' : 'nameSty']">在建项目数</div>
            <div
              :class="[isHeight ? 'num' : 'numSty']"
              v-if="bussiness"
              @click="goProjectList('STARTED', '')"
            >
              {{ bussiness.projectOn || 0 }}
            </div>
          </li>
          <li>
            <div :class="[isHeight ? 'name' : 'nameSty']">未开工项目数</div>
            <div
              :class="[isHeight ? 'num' : 'numSty']"
              v-if="bussiness"
              @click="goProjectList('NOT_STARTED', '')"
            >
              {{ bussiness.projectOff || 0 }}
            </div>
          </li>
          <li>
            <div :class="[isHeight ? 'name' : 'nameSty']">政府投资项目数</div>
            <div
              :class="[isHeight ? 'num' : 'numSty']"
              v-if="bussiness"
              @click="goProjectList('', 'GOV')"
            >
              {{ bussiness.projectGov || 0 }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'enterpriseStatistics',
  data() {
    return {
      bussiness: {},
      isHeight: true,
    }
  },
  props: {
    area: {
      type: String,
      default: '',
    },
  },
  watch: {
    area(val) {
      this.getcompanystats(val)
    },
  },
  computed: {
    totalLists: function () {
      if (this.bussiness.projectTotal) {
        let num = this.bussiness.projectTotal + ''
        return num.split('')
      }
    },
  },
  created() {
    this.getcompanystats(this.area)
  },
  mounted() {
    const windowHeight = window.screen.height
    if (windowHeight <= 900) {
      this.isHeight = false
    }
  },
  methods: {
    //企业总数统计
    getcompanystats(areaId) {
      this.axios
        .post('api-r/employeejob/expand/projectstats', { areaId })
        .then((res) => {
          if (!res.data.hasError) {
            this.bussiness = res.data.result
          } else {
            this.bussiness = {
              projectTotal: 0,
              projectOn: 0,
              projectOff: 0,
              projectGov: 0,
            }
          }
        })
    },
    goProjectList(val, type) {
      const vm = this
      vm.$router.push({
        path: '/home/project/projectList',
        name: 'projectList',
        query: {
          areaId: this.area,
          status: val,
          investment: type,
          sign: 'eZhouBigScreen',
        },
      })
      vm.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectList',
        newUrl: vm.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
// 企业统计样式
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    line-height: 30px;
    // border: 1px solid #ccc;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .statisticsConSty {
    height: calc(100% - 30px);
    position: relative;
    line-height: 1;
    overflow-y: auto;
    .statisticsNumBox {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      // margin-top:5px;
      .statisticsNum {
        width: 100%;
        text-align: center;
        li {
          display: inline-block;
          margin-right: 6px;
          // background-color: #1c405b;
          color: #13fdff;
          background: url('../../assets/numBox.png') center center no-repeat;
          background-size: 100% 100%;
        }
        .liSty {
          width: 40px;
          height: 40px;
          line-height: 40px;
          font-size: 40px;
        }
        .heightSty {
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-size: 30px;
        }
      }
      .list {
        margin-top: 12px;
        width: 100%;
        text-align: center;
        li {
          display: inline-block;
          width: 31%;
          text-align: center;
          .num {
            font-size: 20px;
            line-height: 24px;
            color: #13fdff;
            cursor: pointer;
          }
          .numSty {
            font-size: 18px;
            line-height: 22px;
            color: #13fdff;
            cursor: pointer;
          }
          .name {
            font-size: 14px;
            line-height: 18px;
            color: #01b3ff;
          }
          .nameSty {
            font-size: 12px;
            line-height: 16px;
            color: #01b3ff;
          }
        }
      }
      .boxSty {
        margin-top: 8px !important;
      }
    }
  }
}
</style>
